<div class="exam-topic">
  <div class="ui-g">
    <div class="ui-g-4 ui-md-4 menu">
      <div class="title">
        <p [ngClass]="{'active': topicTabActiveIndex === 0}" (click)="topicTabActiveIndex=0">题库选择</p>
<!--        <p [ngClass]="{'active': topicTabActiveIndex === 1}" (click)="topicTabActiveIndex=1">自定义新增</p>-->
      </div>
      <div class="list">
        <p-tabView [activeIndex]="topicTabActiveIndex">
          <p-tabPanel>
            <p-scrollPanel [style]="{width: '100%', height: '57vh'}">
              <p
                class="select-list pt-3 pb-3 text-center text-gray"
                *ngFor="let item of topicData"
                (click)="topicOperate(topicOperateFlag = 'select', item)"
              >
                {{item.subjectStoreName}}
              </p>
            </p-scrollPanel>
          </p-tabPanel>
          <p-tabPanel>
            待开发中......
          </p-tabPanel>
        </p-tabView>
      </div>
    </div>
    <div class="ui-g-8 ui-md-8 content">
      <div class="topic">
        <p-scrollPanel [style]="{height:'100%'}">
          <div class="remind" *ngIf="topicTableSelect.length === 0">
            <h4 class="text-gray">请在题库中选择考试题目</h4>
          </div>
          <ng-container *ngIf="topicTableSelect.length">
            <app-topic
              *ngFor="let item of topicSelectList"
              [topicListData]="item"
              (delChange)="topicOperate(topicOperateFlag='del', $event)"
              [delable]="true">
            </app-topic>
          </ng-container>
        </p-scrollPanel>
      </div>
    </div>
  </div>
  <div class="modal">
    <p-dialog
      [closable]="false"
      [blockScroll]="true"
      [(visible)]="topicOperateModal" [style]="{width: '50vw'}"
    >
      <p-header>请选择题目</p-header>
      <div style="width: 100%;height: 40vh;overflow: hidden">
        <p-table
          [(selection)]="topicTableSelect"
          [value]="topicTableData"
          [scrollable]="true" scrollHeight="100%"
        >
          <ng-template pTemplate="body" let-rowData let-columns="columns">
            <tr>
              <td style="width: 3em">
                <p-tableCheckbox [value]="rowData"></p-tableCheckbox>
              </td>
              <td>
                <app-topic [topicListData]="rowData"></app-topic>
              </td>
            </tr>
          </ng-template>
          <ng-template pTemplate="summary">
            <app-pagination [option]="topicPageOption" (clickEvent)="topicPageEvent($event)"></app-pagination>
          </ng-template>
        </p-table>
      </div>
      <p-footer>
        <button
          pButton label="取消" class="ui-button-rounded ui-button-white"
          (click)="topicOperate(this.topicOperateFlag = 'cancel')">
        </button>
        <button
          pButton class="ui-button-rounded" label="确定添加{{topicTableSelect.length}}题目至项目"
          (click)="topicOperate(this.topicOperateFlag = 'save')">
        </button>
      </p-footer>
    </p-dialog>
  </div>
</div>
